<template>
	<div>
		<header id="header" class="mui-bar mui-bar-nav">
			<i style="color: #fff;" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" v-on:click="back"></i>
			<h1 class="mui-title" style="color: #fff;">对比详情</h1>
		</header>
		<div class="xq new">
			<ul>
				<li>
					<div class="mui-switch mui-switch-blue" data-switch="6" style="transition-duration: 0.2s;">
						<div class="mui-switch-handle" style="transition-duration: 0.2s; transform: translate(0px, 0px);"></div>
					</div>
					<span>隐藏相同</span>
				</li>
				<li v-for="item in newDuiBi"><span>{{item.houseName}}</span></li>
			</ul>
			<ul><li>性价比星级<br />综合得分</li><li v-for="item in newDuiBi"><img v-for="list in hasStar(item.districtScore)" :src=list alt="" style="width: 18px;"/><br>{{item.districtScore}}分</li></ul>
			<ul><li>价格(元/平)</li>  <li v-for="item in newDuiBi">{{item.communityPrice}}</li> </ul>
			<ul><li>所在区域</li>  <li v-for="item in newDuiBi">{{item.urbanArea}}</li> </ul>
			<ul><li>所属商圈</li>  <li v-for="item in newDuiBi">{{item.circleName}}</li> </ul>
			<ul><li>楼盘地址</li>  <li v-for="item in newDuiBi">{{item.cellAddress}}</li> </ul>
			<ul><li>物业类型</li>  <li v-for="item in newDuiBi">{{item.propertyType}}</li> </ul>
			<ul><li>开发商</li>  <li v-for="item in newDuiBi">{{item.developerName}}</li> </ul>
			<ul><li>项目特色</li>  <li v-for="item in newDuiBi">{{item.projectFeatures}}</li> </ul>
			<ul><li>占地面积(m²)</li>  <li v-for="item in newDuiBi">{{item.areaCovered}}</li> </ul>
			<ul><li>容积率</li>  <li v-for="item in newDuiBi">{{item.volumetricRate}}</li> </ul>
			<ul><li>绿化率(%)</li>  <li v-for="item in newDuiBi">{{item.greeningRate}}</li> </ul>
			<ul><li>建筑类型</li>  <li v-for="item in newDuiBi">{{item.architecturalType}}</li> </ul>
			<ul><li>总户数</li>  <li v-for="item in newDuiBi">{{item.theTotalNumberOfHouseholds}}</li> </ul>
			<ul><li>停车位描述</li>  <li v-for="item in newDuiBi">{{item.parkingLocationDescription }}</li> </ul>
			<ul><li>楼层状况</li>  <li v-for="item in newDuiBi">{{item.floorCondition}}</li> </ul>
			<ul><li>楼栋总数</li>  <li v-for="item in newDuiBi">{{item.totalNumberOfBuildings}}</li> </ul>
			<ul><li>物业费（元/㎡月）</li>  <li v-for="item in newDuiBi">{{item.propertyFee}}</li> </ul>
			<ul><li>交通状况（公交）</li>  <li v-for="item in newDuiBi">{{item.trafficCondition}}</li> </ul>
			<ul><li>地铁</li>  <li v-for="item in newDuiBi">{{item.metro}}</li> </ul>
			<ul v-if="false"><li>配套教育设施</li>  <li v-for="item in newDuiBi">{{item.supportingEducationalCommunity}}</li> </ul>
			<ul><li>周边小学</li>  <li v-for="item in newDuiBi">{{item.peripheralPrimarySchool}}</li> </ul>
			<ul><li>周边中学</li>  <li v-for="item in newDuiBi">{{item.peripheralMiddleSchool}}</li> </ul>
			<ul v-if="false"><li>周边商业业态（种数）</li>  <li v-for="item in newDuiBi">{{item.peripheralBusinessFormat}}</li> </ul>
			<ul><li>最近公园</li>  <li v-for="item in newDuiBi">{{item.theNearestPark}}</li> </ul>
			<ul><li>距离高铁站（公里）</li>  <li v-for="item in newDuiBi">{{item.distanceSpeedRailwayStation}}</li> </ul>
			<ul><li>距离机场（公里）</li>  <li v-for="item in newDuiBi">{{item.distanceFromTheAirport}}</li> </ul>
			<ul><li>距离城市快速干道（公里）</li>  <li v-for="item in newDuiBi">{{item.distanceFromTheCityFastRoad}}</li> </ul>
			<ul><li>开盘时间</li>  <li v-for="item in newDuiBi">{{item.time}}</li> </ul>
			<ul><li>交房日期</li>  <li v-for="item in newDuiBi">{{item.handoverDate}}</li> </ul>
		</div>
		<div class="xq xiaoQu">
			<ul>
				<li>
					<div class="mui-switch mui-switch-blue" data-switch="6" style="transition-duration: 0.2s;">
						<div class="mui-switch-handle" style="transition-duration: 0.2s; transform: translate(0px, 0px);"></div>
					</div>
					<span>隐藏相同</span>
				</li>
				<li v-for="item in xiaoQuDuiBi"><span>{{item.houseName}}</span></li>
			</ul>
		<ul><li>性价比星级<br />综合得分</li></li><li v-for="item in xiaoQuDuiBi"><img v-for="list in hasStar(item.districtScore)" :src=list alt="" style="width: 18px;"/><br>{{item.districtScore}}分</li></ul>
		<ul><li>价格(元/平)</li><li v-for="item in xiaoQuDuiBi">{{item.communityPrice}}</li></ul>
		<ul><li>环比上月</li><li v-for="item in xiaoQuDuiBi">{{item.ringLastMonth }}</li></ul>
		<ul><li>同比去年</li><li v-for="item in xiaoQuDuiBi">{{item.lastYear }}</li></ul>
		<ul><li>所在城区</li><li v-for="item in xiaoQuDuiBi">{{item.urbanArea}}</li></ul>
		<ul><li>所属商圈</li><li v-for="item in xiaoQuDuiBi">{{item.circleName    }}</li></ul>
		<ul><li>小区地址</li><li v-for="item in xiaoQuDuiBi">{{item.cellAddress}}</li></ul>
		<ul><li>物业类型</li><li v-for="item in xiaoQuDuiBi">{{item.propertyType}}</li></ul>
		<ul><li>开发商</li><li v-for="item in xiaoQuDuiBi">{{item.developerName}}</li></ul>
		<ul><li>物业费用</li><li v-for="item in xiaoQuDuiBi">{{item.propertyCost}}</li></ul>
		<ul><li>建筑类型</li><li v-for="item in xiaoQuDuiBi">{{item.architecturalType }}</li></ul>
		<ul><li>产权年限</li><li v-for="item in xiaoQuDuiBi">{{item.yearsOfPropertyRights}}</li></ul>
		<ul><li>建筑年代</li><li v-for="item in xiaoQuDuiBi">{{item.architecturalAge}}</li></ul>
		<ul><li>容积率</li><li v-for="item in xiaoQuDuiBi">{{item.volumetricRate}}</li></ul>
		<ul><li>绿化率(%)</li><li v-for="item in xiaoQuDuiBi">{{item.greeningRate}}</li></ul>
		<ul><li>人车分流</li><li v-for="item in xiaoQuDuiBi">{{item.shuntingOfHumanAndVehicle}}</li></ul>
		<ul><li>总楼栋数</li><li v-for="item in xiaoQuDuiBi">{{item.totalNumberOfBuildings}}</li></ul>
		<ul><li>总户数</li><li v-for="item in xiaoQuDuiBi">{{item.theTotalNumberOfHouseholds}}</li></ul>
		<ul v-if="false"><li>小区配套教育设施</li><li v-for="item in xiaoQuDuiBi">{{item.supportingEducationalCommunity}}</li></ul>
		<ul><li>周边小学</li><li v-for="item in xiaoQuDuiBi">{{item.peripheralPrimarySchool}}</li></ul>
		<ul><li>周边中学</li><li v-for="item in xiaoQuDuiBi">{{item.peripheralMiddleSchool}}</li></ul>
		<ul v-if="false"><li>周边商业业态（种数）</li><li v-for="item in xiaoQuDuiBi">{{item.peripheralBusinessFormat}}</li></ul>
		<ul><li>最近公园</li><li v-for="item in xiaoQuDuiBi">{{item.theNearestPark}}</li></ul>
		<ul><li>距离高铁站（公里）</li><li v-for="item in xiaoQuDuiBi">{{item.distanceSpeedRailwayStation}}</li></ul>
		<ul><li>距离机场（公里）</li><li v-for="item in xiaoQuDuiBi">{{item.distanceFromTheAirport}}</li></ul>
		<ul><li>距离城市快速干道（公里）</li><li v-for="item in xiaoQuDuiBi">{{item.distanceFromTheCityFastRoad}}</li></ul>
		<ul v-if="false"><li>联系电话</li><li v-for="item in xiaoQuDuiBi">{{item.contactTelephone}}</li></ul>
		</div>
		<div class="xq all">
			<ul>
				<li>
					<div class="mui-switch mui-switch-blue" data-switch="6" style="transition-duration: 0.2s;">
						<div class="mui-switch-handle" style="transition-duration: 0.2s; transform: translate(0px, 0px);"></div>
					</div>
					<span>隐藏相同</span>
				</li>
				<li v-for="item in allDuiBi"><span>{{item.houseName}}</span></li>
			</ul>
			<ul><li>性价比星级<br />综合得分</li></li><li v-for="item in allDuiBi"><img v-for="list in hasStar(item.districtScore)" :src=list alt="" style="width: 18px;"/><br>{{item.districtScore}}分</li></ul>
			<ul><li>价格(元/平)</li><li v-for="item in allDuiBi">{{item.communityPrice}}</li></ul>
			<ul><li>所在区域</li><li v-for="item in allDuiBi">{{item.urbanArea}}</li></ul>
			<ul><li>所属商圈</li><li v-for="item in allDuiBi">{{item.circleName}}</li></ul>
			<ul><li>地址</li><li v-for="item in allDuiBi">{{item.cellAddress}}</li></ul>
			<ul><li>物业类型</li><li v-for="item in allDuiBi">{{item.propertyType}}</li></ul>
			<ul><li>开发商</li><li v-for="item in allDuiBi">{{item.developerName}}</li></ul>
			<ul><li>容积率</li><li v-for="item in allDuiBi">{{item.volumetricRate}}</li></ul>
			<ul><li>绿化率(%)</li><li v-for="item in allDuiBi">{{item.greeningRate}}</li></ul>
			<ul><li>建筑类型</li><li v-for="item in allDuiBi">{{item.architecturalType}}</li></ul>
			<ul><li>总户数</li><li v-for="item in allDuiBi">{{item.theTotalNumberOfHouseholds}}</li></ul>
			<ul><li>楼栋总数</li><li v-for="item in allDuiBi">{{item.totalNumberOfBuildings}}</li></ul>
			<ul v-if="false"><li>配套教育设施</li><li v-for="item in allDuiBi">{{item.supportingEducationalCommunity}}</li></ul>
			<ul><li>周边小学</li><li v-for="item in allDuiBi">{{item.peripheralPrimarySchool}}</li></ul>
			<ul><li>周边中学</li><li v-for="item in allDuiBi">{{item.peripheralMiddleSchool}}</li></ul>
			<ul><li>周边商业业态（种数）</li><li v-for="item in allDuiBi">{{item.peripheralBusinessFormat}}</li></ul>
			<ul><li>最近公园</li><li v-for="item in allDuiBi">{{item.theNearestPark}}</li></ul>
			<ul><li>距离高铁站（公里）</li><li v-for="item in allDuiBi">{{item.distanceSpeedRailwayStation}}</li></ul>
			<ul><li>距离机场（公里）</li><li v-for="item in allDuiBi">{{item.distanceFromTheAirport}}</li></ul>
			<ul><li>距离城市快速干道（公里）</li><li v-for="item in allDuiBi">{{item.distanceFromTheCityFastRoad}}</li></ul>
		</div>
	</div>
</template>

<script>
		export default {
		data() {
			return {
				msg: 'Welcome to Your Vue.js App',
				newDuiBi:[],
				xiaoQuDuiBi:[],
				allDuiBi:[],
			}
		},
		mounted: function() {
			let that = this;
			let ajaxURL=localStorage.getItem("ajaxURL");
			var selList= JSON.parse(localStorage.getItem('selList'));
			var type = 'new';
			if(selList[0].type==selList[1].type){
				if(this.$route.query.type=='new'){
					$('.xiaoQu').addClass('showNone')
					$('.all').addClass('showNone')
					$('.new').removeClass('showNone')
				}else if(this.$route.query.type=='xiaoQu'){
					$('.new').addClass('showNone')
					$('.all').addClass('showNone')
					$('.xiaoQu').removeClass('showNone')
					type='xiaoQu';
				}
			}else{
				type='all';
				$('.new').addClass('showNone')
				$('.xiaoQu').addClass('showNone')
				$('.all').removeClass('showNone')
			}
			
			$('.mui-switch').click(function(){
				if($(this).hasClass('mui-active')){
					$(this).removeClass('mui-active').children('.mui-switch-handle').css('transform','translate(0px, 0px)')
					$(this).parent().parent().parent().find('ul').each(function(){
						$(this).show()
					})
				}else{
					$(this).addClass('mui-active').children('.mui-switch-handle').css('transform','translate(43px, 0px)')
					$(this).parent().parent().parent().find('ul').each(function(){
						if($(this).children('li').eq(1).html()==$(this).children('li').eq(2).html()){
							$(this).hide()
						}
					})
				}
			})
			
			var city= localStorage.getItem('city')
			
			var params=  JSON.stringify([
					{ "cityId": city,"houseType":selList[0].type,"houseId":selList[0].houseId },
					{ "cityId": city,"houseType":selList[1].type,"houseId":selList[1].houseId }
				])
			$.ajax({
				type:"get",
				url:`${ajaxURL}/houseweb/H5/allHouseCompare.do`,
//				url:"http://192.168.0.162:8080/houseweb/H5/allHouseCompare.do",
				data:{
					paramType:type,
					params:params
				},
				success:function(data){	
					var res  = JSON.parse(data)
					console.log(res)
					if(type=='xiaoQu'){
						function f(num,n){ 
		    				if(num<0){
			        				num=-num;
			        			}
						    return parseInt(num*Math.pow(10,n)+0.5,10)/Math.pow(10,n); 
						  } 
		    			var year = (new Date()).getFullYear();
		    			var month = (new Date()).getMonth()+1>9?(new Date()).getMonth():'0'+(new Date()).getMonth();
		    			if(res.data.prices.length>0){
							var price =res.data.prices;
							var arr1=[];
							var arr2=[];
			    			for(var i=0;i<price.length;i++){
			    				if(selList[0].houseId==price[i].village_id){
			    					arr1.push(price[i])
			    				}else{
			    					arr2.push(price[i])
			    				}
			    				
			    			}
			    			
			    			if(arr1.length>1){
			    				var month1='';//去年本月的
				    			var month2=arr1[0].average_price;//当前月份的
				    			var month3=arr1[1].average_price;//上一月份的
				    			for(var i=0;i<arr1.length;i++){
				    				if(arr1[i].record_time.substring(4,0)==(year-1)){
				    					if(arr1[i].record_time.substring(5,7)==month){
				    						month1=arr1[i].average_price;
				    					}
				    					
				    				}
				    			}
				    			
				    			res.data.house[0].communityPrice=month2;
				    			var s1=(month2-month3)/month2*1000000+'';
				    			var s2=(month2-month1)/month2*1000000+'';
				    			res.data.house[0].ringLastMonth=f(s1.split('.')[0]/1000000/100,5)+'%';
				    			res.data.house[0].lastYear=f(s2.split('.')[0]/1000000/100,5)+'%';
				    			console.log((month2-month1)/month2)
				    			if(month2>=month3){
				    				res.data.house[0].ringLastMonth+='↑';
				    			}else{
				    				res.data.house[0].ringLastMonth+='↓';	
				    			}
				    			if(month2>=month1){
				    				res.data.house[0].lastYear+='↑';
				    			}else{
				    				res.data.house[0].lastYear+='↓';
				    			}
			    			}else if(arr1.length>0){
			    				res.data.house[0].communityPrice=arr1[0].average_price;
			    				res.data.house[0].ringLastMonth='暂无数据';
			    				res.data.house[0].lastYear='暂无数据';
			    			}else{
			    				res.data.house[0].communityPrice='暂无数据';
			    				res.data.house[0].ringLastMonth='暂无数据';
			    				res.data.house[0].lastYear='暂无数据';
			    			}
			    			
			    			if(arr2.length>1){
			    				var month1='';//去年本月的
				    			var month2=arr2[0].average_price;//当前月份的
				    			var month3=arr2[1].average_price;//上一月份的
				    			for(var i=0;i<arr2.length;i++){
				    				if(arr2[i].record_time.substring(4,0)==(year-1)){
				    					if(arr2[i].record_time.substring(5,7)==month){
				    						month1=arr2[i].average_price;
				    					}
				    					
				    				}
				    			}
				    			
				    			res.data.house[1].communityPrice=month2;
				    			var s1=(month2-month3)/month2*1000000+'';
				    			var s2=(month2-month1)/month2*1000000+'';
				    			res.data.house[1].ringLastMonth=f(s1.split('.')[0]/1000000/100,5)+'%';
				    			res.data.house[1].lastYear=f(s2.split('.')[0]/1000000/100,5)+'%';
				    			console.log((month2-month1)/month2)
				    			if(month2>=month3){
				    				res.data.house[1].ringLastMonth+='↑';
				    			}else{
				    				res.data.house[1].ringLastMonth+='↓';	
				    			}
				    			if(month2>=month1){
				    				res.data.house[1].lastYear+='↑';
				    			}else{
				    				res.data.house[1].lastYear+='↓';
				    			}
			    			}else if(arr2.length>0){
			    				res.data.house[1].communityPrice=arr2[0].average_price;
			    				res.data.house[1].ringLastMonth='暂无数据';
			    				res.data.house[1].lastYear='暂无数据';
			    			}else{
			    				res.data.house[1].communityPrice='暂无数据';
			    				res.data.house[1].ringLastMonth='暂无数据';
			    				res.data.house[1].lastYear='暂无数据';
			    			}
		    			}
					}
					
	    			
	    			if(type=='new'){
	    				res.data.house[0].districtScore=parseFloat(res.data.house[0].districtScore).toFixed(2)
	    				res.data.house[1].districtScore=parseFloat(res.data.house[1].districtScore).toFixed(2)
						that.newDuiBi=res.data.house;
					}
					if(type=='xiaoQu'){
						that.xiaoQuDuiBi=res.data.house;
					}
					if(type=='all'){
						that.allDuiBi=res.data.house;
					}
				}
			});
		},
		methods: {
			back() {
				let data = JSON.parse(localStorage.getItem('data'))
				data.page=1;
				localStorage.setItem('data',JSON.stringify(data)) 
				this.$router.go(-1)
			},
			hasStar: function(houseCore) {
				let star = [];
				let str = houseCore/20;
				for(let i = 0; i < Math.floor(str); i++) {
					star.push('static/images/red-star.png');
				}
				if(str - Math.floor(str) >= 0.75) {
					star.push('static/images/red-star.png');
				} else if(str - Math.floor(str) >= 0.25) {
					star.push('static/images/half-red-star.png');
				} else if(str!=5) {
					star.push('static/images/prompt-star.png');
				}
				if(Math.floor(str) <5) {
					for(let i = 4; i > Math.floor(str); i--) {
						star.push('static/images/prompt-star.png');
					}
				}
				return star;
			},
		}
	}
</script>

<style>
	.mui-bar.mui-bar-nav {
		position: fixed;
		top: 0;
		height: 50px;
		background-color: #0186c2;
	}
	
	.mui-bar-nav a {
		color: #fff;
	}
	
	.mui-bar-nav.mui-bar .mui-icon {
		padding-top: 12px;
	}
	
	.mui-bar .mui-title {
		line-height: 50px;
	}
	.xq {
		width: 100%;
		height: 100%;
		overflow-y: auto;
		padding-top: 50px;
		padding-bottom: 50px;
		background-color: #fff;
	}
	.xq ul {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		border-bottom: 1px solid #c6c6c6;
	}
	.xq ul li {
		color: #6b6b6b;
		font-size: 14px;
		text-align: center;
		padding: 10px 10px;
	}
	.xq ul li:nth-child(1) {
		font-size: 12px;
		width: 90px;
	}
	
	.xq ul li:nth-child(2) {
		flex: 1;
		border-left: 1px solid #c6c6c6;
		border-right: 1px solid #c6c6c6;
	}
	.xq ul li:nth-child(3) {
		flex: 1;
	}
	.xq li span {
		display: block;
		width: 70%;
		height: auto;
		margin: 0 15%;
	}
	.xq ul li:nth-child(1) span{
		width: 100%;
		margin: 0;
	}
	.mui-switch {
		margin: 5px auto;
	}
	.showNone {
		display: none;
	}
	.xq ul:nth-child(1) {
		position: fixed;
		background-color: #fff;
		width: 100%;
		height: 82px;
	}
	.xq ul:nth-child(2) {
		position: fixed;
		top: 132px;
		background-color: #fff;
		width: 100%;
	}
	.xq ul:nth-child(3) {
		margin-top: 147px;
	} 
	.xq ul:nth-child(1) li:nth-child(2), .xq ul:nth-child(1) li:nth-child(3) {
		text-align: center;
		padding: 26px 0;
	}
	.xq ul:nth-child(2n) {
		background-color: #f6f6f6;
	}
</style>


